<template>
  <div class="theme-toggle">
    <el-tooltip 
      :content="getThemeText()" 
      placement="bottom"
      effect="dark"
    >
      <button 
        class="theme-toggle-btn" 
        @click="toggleTheme"
        :title="getThemeText()"
      >
        <el-icon class="theme-icon">
          <Sunny v-if="getThemeIcon() === 'Sunny'" />
          <Moon v-else />
        </el-icon>
        <span class="theme-text">{{ getThemeText() }}</span>
      </button>
    </el-tooltip>
  </div>
</template>

<script lang="ts" setup>
import { Sunny, Moon } from '@element-plus/icons-vue'
import { useTheme } from '@/composables/useTheme'

const { toggleTheme, getThemeIcon, getThemeText } = useTheme()
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.scss';
@import '@/assets/styles/mixins.scss';

.theme-toggle {
  display: inline-block;
}

.theme-toggle-btn {
  @include center-flex;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-normal);
  font-size: var(--font-size-sm);
  min-width: 100px;
  
  &:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
    background: rgba(102, 126, 234, 0.05);
    transform: translateY(-1px);
  }
  
  &:active {
    transform: translateY(0);
  }
}

.theme-icon {
  font-size: var(--font-size-lg);
  transition: var(--transition-fast);
}

.theme-text {
  font-weight: var(--font-weight-medium);
}

// 暗黑模式下的特殊样式
[data-theme="dark"] .theme-toggle-btn {
  &:hover {
    background: rgba(102, 126, 234, 0.15);
  }
}

// 响应式设计
@include respond-below(md) {
  .theme-text {
    display: none;
  }
  
  .theme-toggle-btn {
    min-width: auto;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
  }
}
</style>